import React, { Component } from "react";

export default class Menu extends Component {
  constructor() {
    super();
    this.state = {
      activeIndex: 0, //都不出来
      list: [
        {
          id: 1,
          msg: "菜单1",
          list: [
            { id: 11, msg: "菜单1.1" },
            { id: 12, msg: "菜单1.2" },
          ],
        },
        {
          id: 2,
          msg: "菜单2",
          list: [
            { id: 21, msg: "菜单2.1" },
            { id: 22, msg: "菜单2.2" },
          ],
        },
        {
          id: 3,
          msg: "菜单3",
          list: [
            { id: 31, msg: "菜单3.1" },
            { id: 32, msg: "菜单3.2" },
          ],
        },
      ],
    };
  }
  change  = (item)=>{
    this.setState({
        activeIndex:item.id == this.state.activeIndex?0:item.id,
    })

  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item) => {
            return (
              <li key={item.id}>
              <span onClick={()=>{
                this.change(item);
              }}> {item.msg}</span> 
                <ul
                  style={{
                    display:
                      item.id === this.state.activeIndex ? "block" : "none",
                  }}
                >
                  {item.list.map((info) => {
                    return <li key={info.id}>{info.msg}</li>;
                  })}
                </ul>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
